<template>
  <section class="component commission-set">
    <data-box :data="dataSet">
      <template slot="columns">
        <el-table-column label="逾期阶段（起）" prop="overduePeriodStart" :min-width="$helper.getColumnWidth(5)">
          <template slot-scope="scope">
            <el-select v-model="scope.row.overduePeriodStart" clearable>
              <el-option v-for="{index,name,code} in $dict.getDictData('OverduePeriodStatus')" :key="index" :label="name" :value="code.replace(/M|\+/, '')"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="逾期阶段（止）" prop="overduePeriodEnd" :min-width="$helper.getColumnWidth(5)">
          <template slot-scope="scope">
            <el-select v-model="scope.row.overduePeriodEnd" clearable>
              <el-option v-for="{index,name,code} in $dict.getDictData('OverduePeriodStatus')" :key="index" :label="name" :value="code.replace(/M|\+/, '')"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="还款方式" prop="paymentAccountType" :min-width="$helper.getColumnWidth(4)">
          <template slot-scope="scope">
            <el-select v-model="scope.row.paymentAccountType" clearable>
              <el-option v-for="{index,name,code} in $dict.getDictData('PaymentAccountType')" :key="index" :label="name" :value="code.replace(/M|\+/, '')"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column :label="isCommission ? '佣金比例（%）' :'绩效比例（%）' " prop="rate" :min-width="$helper.getColumnWidth(5)">
          <template slot-scope="scope">
            <el-input v-model="scope.row.rate" :placeholder="isCommission ? '请输入佣金比例' : '请输入绩效比例'" type="number" clearable></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="deleteClick(scope)">删除</el-button>
          </template>
        </el-table-column>
      </template>
    </data-box>
  </section>
</template>

<script lang="ts">
import { Vue, Component, Prop, Model } from 'vue-property-decorator'
import DataBox from '~/components/common/data-box.vue'
import { PrincipalService } from "~/services/domain-service/principal.service";
import { DepartmentService } from "~/services/management-service/department.service";
import { Dependencies } from "~/core/decorator";

@Component({
  components: {
    DataBox
  }
})
export default class CommissionSet extends Vue {
  @Model('change') private dataSet
  @Prop({ type: Boolean }) private isCommission
  @Prop({ default: false }) private isOrganize
  @Dependencies(PrincipalService)
  private principalService: PrincipalService;
  @Dependencies(DepartmentService)
  private departmentService: DepartmentService;

  private deleteClick(scope) {
    if (scope.row.id) {
      this.isOrganize ? this.deleteOrganize(scope) : this.deleteAccount(scope)
    } else {
      this.dataSet.splice(scope.$index, 1)
    }
  }

  private deleteOrganize(scope) {
    this.departmentService.deletePerformanceDetailById(scope.row.id).subscribe(data => {
      this.dataSet.splice(scope.$index, 1)
    })
  }

  private deleteAccount(scope) {
    this.principalService.deleteCommissionDetailById(scope.row.id).subscribe(
      data => {
        this.dataSet.splice(scope.$index, 1)
      },
      ({ msg }) => { }
    );
  }
}
</script>
<style lang="less" scoped>
.component.commission-set {
  width: 98%;
}
</style>